<template>
	<view>
	 <view class="title-area" style="font-size: 20px;">
	        <text class="title-text">{{detailData.title}}</text>
	      </view>
		   <view class="article-meta"  style="font-size: 20px;">
		        <text class="article-meta-text article-author">{{detailData.categoryName}}</text>
		        <text class="article-meta-text article-text">发表于</text>
		        <text class="article-meta-text article-time">{{detailData.createTime}}</text>
				 <text class="article-meta-text article-text" v-if="detailData.author!=''">整理人：{{detailData.author}}</text>
				<text class="article-meta-text article-text"  v-if="detailData.source!=''">来源：{{detailData.source}}</text>
		      </view>
			   <view class="article-content">
				  <view class="article-content">
				       <rich-text :nodes="detailData.content" style="font-size: 14px;"></rich-text>
				     </view>
			   </view>
			  </view>
</template>
<script>
	import api from '@/api/index.js'

	export default {
		data() {
			return {
				detailData: []
			}
		},
		onLoad: function(option) {

			const id = option.id;
			this.getDetail(id)
		},
		methods: {
			getDetail(id) {
				api.exam.GetTopicDetail(id).then(res => {
					this.detailData = res[0];
				});
			}
		}
	}
</script>


<style>
.title-area {
	padding-left: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    z-index: 11;
  }

  .title-text {
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    lines: 2;
    color: #000000;
    overflow: hidden;
  }

  .article-meta {
    padding: 10px 15px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .article-meta-text {
    color: gray;
  }

  .article-text {
    font-size: 12px;
    line-height: 25px;
    margin: 0 10px;
  }

  .article-author {
    font-size: 15px;
  }

  .article-time {
    font-size: 15px;
  }

  .article-content {
    font-size: 15px;
    padding: 0 15px;
    margin-bottom: 15px;
    overflow: hidden;
  }

  /* #ifdef H5 */

  .article-content {
    line-height: 1.8;
  }

  .article-content img {
    max-width: 100%;
  }

  /* #endif */
  </style>
